<template>
  <div class="content">
    <div>
      <van-nav-bar title="物料详情" class="nav-bar-style" left-arrow @click-left="onClickLeft">
        <template #title>
          <div class="nav-bar-title-style">入库物料</div>
        </template>
        <template #left>
          <van-icon size="30" name="arrow-left" color="#FFF" />
        </template>
      </van-nav-bar>
    </div>

    <van-popup v-model="isShowSelectStoreLocation" style="width:100%" position="bottom">
      <div v-show="isShowSelectStoreLocation" class="pickerToobarStyle">
        <div class="pickerToolbarContentButton" @click="isShowSelectStoreLocation = false">取消</div>
        <div v-show="isShowSelectStoreLocation" class="pickerToolbarContent">
          <p>请选择储存位置</p>
        </div>
        <div @click="onClickCustomerConfirm" class="pickerToolbarContentButton">确认</div>
      </div>
      <van-picker
        ref="picker"
        class="pickerToolbarContentButton"
        confirm-button-text="确定"
        cancel-button-text="取消"
        visible-item-count="6"
        :columns="storeDataList"
      ></van-picker>
    </van-popup>

    <div>
      <ul>
        <li class="contLi">
          <div class="left">
            <div style="padding: 8px;">
              <div class="leftLi">
                <span class="title">单据号</span>
                <span class="desc">{{this.materailInfo.orderCode}}</span>
              </div>
              <div class="leftLi">
                <span class="title">物料名称</span>
                <span class="desc">{{this.materailInfo.materailName}}</span>
              </div>
              <div class="leftLi">
                <span class="title">物料编码</span>
                <span class="desc">{{this.materailInfo.materailCode}}</span>
              </div>
              <!-- <div class="leftLi">
                <span class="title">物料类型</span>
                <span class="desc">{{this.materailInfo.materialCode}}</span>
              </div> -->
              <div class="leftLi">
                <span class="title">规格</span>
                <span class="desc">{{this.materailInfo.batchCode}}</span>
              </div>
              <!-- <div class="leftLi">
                <span class="title">生产日期</span>
                <span
                  class="desc"
                >{{$moment(this.materailInfo.productionDate).format('YYYY-MM-DD HH:mm:ss')}}</span>
              </div>
              <div class="leftLi">
                <span class="title">有效期至</span>
                <span
                  class="desc"
                >{{$moment(this.materailInfo.expirationDate).format('YYYY-MM-DD HH:mm:ss')}}</span>
              </div>
              <div class="leftLi">
                <span class="title">储存条件</span>
                <span class="desc">{{this.materailInfo.sCondition}}</span>
              </div> -->
            </div>

            <div class="slot"></div>
            <div class="storeLiStyle">
              <span class="storeLeft">储存位置</span>
              <span class="storeRight" @click="showSlectStoreLocation">{{this.getLocationText()}}</span>
              <div class="right-arrow-style" @click="showSlectStoreLocation">
                <img src="@/assets/ic_right_arrow.png" width="30%" height="30%" />
              </div>
            </div>
            <div class="slot"></div>

            <div style="padding: 8px;">
              <div class="leftLi">
                <span class="title">待入库数量</span>
                <span class="desc">{{this.stayNumber}}</span>
              </div>
              <div class="scanCountLi">
                <span class="title">扫码数量</span>
                <span class="toInStorageCountStyle">{{ this.materailInfo.alreadyNumber }}</span>
                <img
                  src="@/assets/ic_more.png"
                  width="26px"
                  height="26px"
                  class="scanCountMoreStyle"
                  @click="onClickMore"
                />
              </div>
              <!-- <div @click="scanInStorageMaterialDetail">测试</div> -->
            </div>
          </div>
        </li>
      </ul>
    </div>

    <div class="divBtnToInStorageStyle">
      <van-button
        :disabled="isBtnToInstorageDisabled"
        size="large"
        type="primary"
        class="btnToInStorageStyle"
        @click="toInStorage"
      >入库</van-button>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import http from "@/utils/request.js";
import api from "@/utils/api";
import SERVER_RESPONSE from "@/utils/response";
import { List } from "vant";
import { PullRefresh } from "vant";
import { NavBar } from "vant";
import router from "@/router";
import Toast from "@/utils/toast";
import { TreeSelect } from "vant";
import { Overlay } from "vant";
import { DropdownMenu, DropdownItem } from "vant";
import { Picker } from "vant";
import { Dialog } from "vant";

Vue.use(List);
Vue.use(PullRefresh);
Vue.use(NavBar);
Vue.use(TreeSelect);
Vue.use(Overlay);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
Vue.use(Picker);

export default {
  data() {
    return {
      storageMappingId:'',
      storageLocation:'',
      stayNumber:0,
      isFirstEnter: false,
      isBtnToInstorageDisabled: true,
      placeHolderInfo: {
        selectLocation: "请选择 储存位置 >"
      },

      isShowSelectStoreLocation: false,
      batchCode: "",

      barCodes: [],
      scanedIndex: 0,
      hasScanBarCodes: [],
      hasScanedCount: 0,

      materailInfo: {
        // materialId: "",
        // materialName: "",
        // materialCode: "",
        // batchCode: "",
        // productionDate: "",
        // expirationDate: "",
        // barCode: "",
        // sCondition: "",
        // number: 0
      },

      storeLocationInfo: {
        areaIndex: 0,
        areaValue: "",
        regionIndex: 0,
        regionValue: "",
        shelfIndex: 0,
        shelfValue: "",
        shelfId: ""
      },

      storeData: {
        storeLocationInfo: "",
        inStorageInfos: "",
        hasScanedCount: 0,
        hasScanBarCodes: ""
      },

      inStorageInfos: [],
      storeDataList: [],
      materailList: [],
      show: false
    };
  },
  methods: {
    isHasSelectLastLocation(currentSelectLocationText) {
      let result = false;
      /*
       {
          "storageMappingId": 3786063446785654784,
          "storageMappingName": "33/库区9/货架9",
          "barCodes": ["3785395875354771457"]
        }
        */

      for (let inStorageInfo of this.inStorageInfos) {
        if (inStorageInfo.storageMappingName == currentSelectLocationText) {
          result = true;
          break;
        }
      }
      return result;
    },

    onClickMore() {
      this.storeLocalData();

      /*
        {
          "storageMappingId": 3786063446785654784,
          "storageMappingName": "33/库区9/货架9",
          "barCodes": ["3785395875354771457"]
        },
      */

      let strInStorageInfos = JSON.stringify(this.inStorageInfos);
      window.sessionStorage.setItem("hasScanedCount", this.hasScanedCount);
      router.push({
        path: "/hasScanedDetail",
        query: {
          inStockId: this.$route.query.inStockId,
          inStorageInfos: strInStorageInfos
        }
      });
    },






    onClickCustomerConfirm() {
      let indexes = this.$refs.picker.getIndexes();
      let values = this.$refs.picker.getValues();
      if ((indexes.length < 3) | (values.length < 3)) {
        Toast(" 请选择有货架的库区 去入库");
        return;
      }

      // debugger
      this.storeLocationInfo.areaValue = values[0].storeName;
      this.storeLocationInfo.regionValue = values[1].areaName;
      this.storeLocationInfo.shelfValue = values[2].storageName;
      //修改前
      // this.storeLocationInfo.areaValue = values[0];
      // this.storeLocationInfo.regionValue = values[1];
      // this.storeLocationInfo.shelfValue = values[2];
      
      /*
      storeValues is 仓库1,库区6,货架10
      storeIndexs is 0,0,0
      */
      console.log("当前 批号是:" + this.batchCode);

      this.storeLocationInfo.areaIndex = indexes[0];
      this.storeLocationInfo.regionIndex = indexes[1];
      this.storeLocationInfo.shelfIndex = indexes[2];

      console.log("areaIndex 是:" + indexes[0]);
      console.log("regionIndex 是:" + indexes[1]);
      console.log("shelfIndex 是:" + indexes[2]);

      let areaIndex = this.storeLocationInfo.areaIndex;
      let regionIndex = this.storeLocationInfo.regionIndex;
      let shelfIndex = this.storeLocationInfo.shelfIndex;

      let storeArea = this.storeDataList[areaIndex];
      let storeRegionArray = storeArea.children;
      let storeRegion = storeRegionArray[regionIndex];
      let storeShelfArray = storeRegion.children;

      if (storeShelfArray.length < 1) {
        Toast(" 请选择有货架的库区 去入库");
        return;
      }
      let storeAreadId = storeArea.storeId;
      let storeRegionId = storeRegion.areaId;
      let storeShelfId = storeShelfArray[shelfIndex].storageMappingId;
      this.storeLocationInfo.shelfId = storeShelfId;
      console.log("货架ID " + storeShelfId);
      console.log("仓储信息" + this.getLocationText());

      this.storageMappingId = storeShelfId;
      this.storageLocation = this.getLocationText()

      this.isShowSelectStoreLocation = false;
      this.placeHolderInfo.selectLocation = this.getLocationText();

      let currentSelectLocationText = this.getLocationText();

      if (!this.isHasSelectLastLocation(currentSelectLocationText)) {
        console.log(" pushed a new inStorageInfo here ");
        this.inStorageInfos.push({
          materialId: this.materailInfo.id,
          storageMappingId: storeShelfId,
          storageMappingName: currentSelectLocationText,
          barCodes: []
        });
      }
      this.checkBtnToInStorageStatus();
    },

    showSlectStoreLocation() {
      this.isShowSelectStoreLocation = true;
    },
    checkHasProp(someItem, propName) {
      if (someItem.hasOwnProperty(propName)) {
        return true;
      } else {
        return false;
      }
    },

    getAllStoreInfos() {
      let param = {};
      http
        .fetchGet(api.LimsGetStoresInfo, param)
        .then(response => {
          response.data.forEach(areaItem => {
            areaItem.text = areaItem.storeName;
            if (this.checkHasProp(areaItem, "storeAreas")) {
              //赋值库区信息
              areaItem.children = areaItem.storeAreas;
              areaItem.storeAreas.forEach(regionInfo => {
                regionInfo.text = regionInfo.areaName;
                if (this.checkHasProp(regionInfo, "storages")) {
                  regionInfo.children = regionInfo.storages;
                  regionInfo.storages.forEach(shelfInfo => {
                    shelfInfo.text = shelfInfo.storageName;
                  });
                }
              });
            }
            this.storeDataList.push(areaItem);
            console.log(this.storeDataList);
          });
        })
        .catch(err => {
          console.log(" err  is here " + err);
        });
    },

    getLocationText() {
      if (this.storeLocationInfo.areaValue == "") {
        return "请选择储存位置 ";
      } else {
        return (
          this.storeLocationInfo.areaValue +
          "/" +
          this.storeLocationInfo.regionValue +
          "/" +
          this.storeLocationInfo.shelfValue
        );
      }
    },

    getInStorageDetailList() {
      let param = { sourceCode: this.sourceCode };
      http
        .fetchGet(api.inStorageDetail, param, "正在加载入库单详情")
        .then(response => {
          response.data.forEach(item => {
            this.inStoreageDetailList.push(item);
          });
          this.finished = true;
          this.loading = false;
          this.refreshing = false;
          this.count++;
        })
        .catch(err => {
          console.log(" err  is here " + err);
          this.finished = true;
          this.loading = false;
          this.refreshing = false;
          this.count++;
        });
    },

    showSlectStoreLocation() {
      this.isShowSelectStoreLocation = true;
    },
    onClickSelectLeft(index) {
      this.regionActivieId = index;
    },
    onClickSelectRight(data) {
      this.shelfActiveId = data.id;
    },

    storeLocalData() {
      if (this.hasScanBarCodes.length > 0 || this.hasSelectLocation()) {
        this.storeData.storeLocationInfo = JSON.stringify(
          this.storeLocationInfo
        ); //inStorageInfos
        this.storeData.inStorageInfos = JSON.stringify(this.inStorageInfos); //storeLocationInfo
        this.storeData.hasScanBarCodes = JSON.stringify(this.hasScanBarCodes);
        this.hasScanedCount = this.hasScanBarCodes.length;
        this.storeData.hasScanedCount = this.hasScanedCount;
        window.localStorage.setItem(
          this.batchCode,
          JSON.stringify(this.storeData)
        );
      }
    },
    onClickLeft() {
      this.storeLocalData();
      if (this.stayNumber === 0) {
        router.push({ path: "/InStorage" });
      } else {
        Dialog.confirm({
          title: "友情提示",
          message: "该单据还未扫码完成所有物料，确定要返回？"
        })
          .then(() => {
            router.push({ path: "/InStorage" });
          })
          .catch(() => {});
      }
    },
    scan() {
      window.AndroidWebView.scan();
    },
    toInStorage() {
      let paramInfos = [];
      /*
       请求数据样表
         "infos": [
        {
          "materialId":"dddddid dhere ",
          "storageMappingId": 3786063446785654784,
          "storageMappingName": "33/库区9/货架9",
          "barCodes": ["3785395875354771457"]
        },
      ]
      */
      this.inStorageInfos.forEach(info => {
        if (info.barCodes.length > 0) {
          paramInfos.push(info);
          console.log("仓库名" + info.storageMappingName);
          info.barCodes.forEach(barcode => {
            console.log("对应条码" + barcode);
          });
        }
      });
      console.log(this.inStorageInfos);
      let params = {
        inStockId: this.$route.query.inStockId
        // batchCode: this.batchCode,
        // infos: paramInfos
      };

      console.log("the paras batchCodeis " + params.batchCode);
      console.log("the params infos " + params.paramInfos);
      console.log("the params is " + JSON.stringify(params));

      http.fetchGet(api.LimsPdaSubmitInStock, params, "正在入库中...").then(response => {
          if(response.code === 1){
            Toast("入库成功");
            setTimeout(() => {
              this.$router.push({
                path: "/inStorage"
              });
            }, 1000);
            return;
          }else if(response.code === 2){
            Dialog.alert({
              message: response.message
            });
          }
      }).catch(err => {
          Dialog.alert({
            message: err
          });
      });
    },

    hasSelectLocation() {
      if (this.placeHolderInfo.selectLocation.indexOf("/") > -1) {
        return true;
      } else {
        return false;
      }
    },
    scanInStorageMaterialDetail(scanedBarCode){
      if (!this.hasSelectLocation()) {
        Toast("请选择物理存储位置");
        return;
      }
      var params={
        inStockId: this.$route.query.inStockId,
        qrCode:scanedBarCode,
        // qrCode: '3816176656544956421',
        storageMappingId: this.storageMappingId,
        storageLocation: this.storageLocation
      }
      http.fetchPost(api.LimsInStockScanCodePda, params, "正在扫码...").then(response => {
          if (response.code == SERVER_RESPONSE.ACTION_SUCCESS) {
              this.init()
              Toast("扫码成功");
          }
      }).catch(err => {
          Dialog.alert({
            message: err
          });
      });
    },
    // scanInStorageMaterialDetail(scanedBarCode) {
    //   let scanIndex = this.barCodes.indexOf(scanedBarCode);
    //   // let currentScanedBarcode = this.barCodes[0]
    //   // let scanIndex = this.barCodes[this.scanedIndex]

    //   if (!this.hasSelectLocation()) {
    //     Toast("请选择物理存储位置");
    //     return;
    //   }
    //   //是需要的条码
    //   if (scanIndex > -1) {
    //     let inHasScanBarCodesIndex = this.hasScanBarCodes.indexOf(
    //       scanedBarCode
    //     );
    //     if (inHasScanBarCodesIndex < 0) {
    //       //第一次扫到要扫的条码:
    //       console.log("第一次 扫码 扫到列表中的条码");
    //       this.hasScanBarCodes.push(scanedBarCode);
    //       let currentSelectedLocationText = this.getLocationText();
    //       console.log(this.inStorageInfos);
    //       this.inStorageInfos.forEach(info => {
    //         if (info.storageMappingName == currentSelectedLocationText) {
    //           info.barCodes.push(scanedBarCode);
    //         }
    //       });
    //       /*
    //          this.inStorageInfos.push({
    //           storageMappingId: storeShelfId,
    //           storageMappingName: this.storeLocationInfo.getLocationText(),
    //           barCodes: []
    //         });
    //         */
    //     } else {
    //       //重复扫码：第二次扫到同一个符合要求的条码
    //       let curenLocation = this.getLocationText();
    //       this.inStorageInfos.forEach(storageInfo => {
    //         let itemBarCodes = storageInfo.barCodes;
    //         let barCodesLength = itemBarCodes.length;

    //         let isExistIndex = itemBarCodes.indexOf(scanedBarCode);
    //         if (isExistIndex > -1) {
    //           console.log("------这里是重复条码------");
    //           //重新选择了货架 换了货架重新扫码
    //           if (curenLocation != storageInfo.storageMappingName) {
    //             storageInfo.barCodes.splice(isExistIndex, 1);
    //             console.log("原来位置的条码删除，将新条码存放到新位置;");
    //             console.log("------删除重复条码------");
    //             //原来位置的条码删除，将新条码存放到新位置;
    //           } else {
    //             Toast("重复扫码！");
    //           }
    //         }
    //         //把条码添加到新的位置上;
    //         if (storageInfo.storageMappingName == curenLocation) {
    //           console.log("------第二次扫码 ------");
    //           let isExistScanCodeIndex = storageInfo.barCodes.indexOf(
    //             scanedBarCode
    //           );
    //           if (isExistScanCodeIndex < 0) {
    //             storageInfo.barCodes.push(scanedBarCode);
    //             console.log("---增加到新的位置-- ------");
    //           }
    //         }
    //       });
    //     }
    //   } else {
    //     //条码不存在处理逻辑
    //     Dialog.confirm({
    //       title: "友情提示",
    //       confirmButtonText: "重新扫码",
    //       confirmButtonColor: "#fff",
    //       message: "该条码不在入库单中，请重新扫码",
    //       width: 400
    //     })
    //       .then(() => {})
    //       .catch(() => {});
    //   }
    //   this.checkBtnToInStorageStatus();
    // },

    checkBtnToInStorageStatus() {
      let isHasLocation = this.hasSelectLocation();
      let isScanedAllBarCoeds =
        this.hasScanBarCodes.length == this.barCodes.length;
      //没有选择位置 或者没有扫够条码  disableButtonStatus
      this.isBtnToInstorageDisabled = !isHasLocation || !isScanedAllBarCoeds;
      console.log("重新 调整btn status  ");
    },

    getAllBarCodes() {
      let param = {
        batchCode: this.batchCode,
        page: 1,
        pageSize: 9999
      };
      http
        ///api/Warehousing/GetBarCodes'
        .fetchGet(api.getAllBarCodes, param)
        .then(response => {
          this.barCodes = response.data.barCodes;
          this.checkBtnToInStorageStatus();
        })
        .catch(err => {
          console.log("👽👽👽👽👽👽👽👽👽👽👽👽👽👽👽👽👽👽👽👽👽👽👽👽👽👽👽");
          console.log(" err  is here " + err);
          console.log("here  get ERROR ");
          console.log("👽👽👽👽👽👽👽👽👽👽👽👽👽👽👽👽👽👽👽👽👽👽👽👽👽👽👽");
        });
    },
    //根据批号查询 物料详情
    searchMaterialDetail() {
      let inStockId = this.$route.query.inStockId;
      let param = {
        inStockId: inStockId
      };
      console.log(param)
      http
        .fetchGet(api.LimsGetInStockInfoPda, param)
        .then(response => {
          this.materailInfo = response.data;
          this.stayNumber = response.data.number - response.data.alreadyNumber;
          // this.materailInfo.id = response.data.materialId;
          // this.materailInfo.materialName = response.data.materialName;
          // this.materailInfo.materialCode = response.data.materialCode;
          // this.materailInfo.batchCode = response.data.batchCode;
          // this.materailInfo.productionDate = response.data.productionDate;
          // this.materailInfo.expirationDate = response.data.expirationDate;
          // this.materailInfo.barCode = response.data.barCode;
          // this.materailInfo.sCondition = response.data.sCondition;
          // this.materailInfo.number = response.data.number;
        })
        .catch(err => {
          console.log(" err  is here " + err);
        });
    },

    getStoreLocalData(batchCode) {
      console.log("get storeData here ");
      let localStoreData = JSON.parse(
        window.localStorage.getItem(this.batchCode)
      );

      if (localStoreData == null) {
        return;
      }
      this.storeData = localStoreData;
      console.log(" set storeData here ");
      console.log("storeData is " + this.storeData);
      this.storeLocationInfo = JSON.parse(this.storeData.storeLocationInfo);
      console.log("storeLocationInfo is " + this.storeData.storeLocationInfo);
      console.log("inStorageInfos is " + this.storeData.inStorageInfos);
      this.inStorageInfos = JSON.parse(this.storeData.inStorageInfos);
      this.placeHolderInfo.selectLocation = this.getLocationText();

      this.hasScanBarCodes = JSON.parse(this.storeData.hasScanBarCodes);
      this.hasScanedCount = this.storeData.hasScanedCount;
    },

    getBatchCode() {
      let qureyedBatchcode = this.$route.query.batchCode;
      if (qureyedBatchcode == null || qureyedBatchcode == "undefined") {
        this.batchCode = window.localStorage.getItem("batchCode");
        this.hasScanedCount = window.sessionStorage.getItem("hasScanedCount");
      } else {
        window.localStorage.setItem("batchCode", qureyedBatchcode);
        this.batchCode = qureyedBatchcode;
      }
      return this.batchCode;
    },

    init() {
      this.searchMaterialDetail();
      this.getAllStoreInfos();
      // let getedBatchCode = this.getBatchCode();
      // this.getStoreLocalData(getedBatchCode);
      // this.isFirstEnter = true;
      window.scanInStorageMaterialDetail = this.scanInStorageMaterialDetail;
      // if (this.batchCode != null) {
      //   console.log("重新加载数据");
      //   console.log(" mounted here the batchcode is " + this.batchCode);
      //   this.searchMaterialDetail();
      //   this.getAllStoreInfos();
      // }
      // this.getAllBarCodes();
    }
  },
  created() {
    this.init();
  },
  beforeRouteEnter(to, from, next) {
    if (from.name === "/HasScanedDetail") {
      // 这个name是下一级页面的路由name
      to.meta.isBack = true; // 设置为true说明你是返回到这个页面，而不是通过跳转从其他页面进入到这个页面
    }
    next();
  },
  activated() {
    if (!this.$route.meta.isBack || this.isFirstEnter) {
      // 如果isBack是false，表明需要获取新数据，否则就不再请求，直接使用缓存的数据
      // 如果isFirstEnter是true，表明是第一次进入此页面或用户刷新了页面，需获取新数据
      this.storeLocationInfo.areaValue = ""; // 把数据清空，可以稍微避免让用户看到之前缓存的数据
      this.placeHolderInfo.selectLocation = "请选择 初始位置";
      this.init();
    }

    // 恢复成默认的false，避免isBack一直是true，导致下次无法获取数据
    this.$route.meta.isBack = false;
    // 恢复成默认的false，避免isBack一直是true，导致每次都获取新数据
    this.isFirstEnter = false;
  }
};
</script>

<style scoped>
.contLi {
  /* padding: 8px; */
  box-sizing: border-box;
  display: flex;
  font-size: 20px;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  margin-top: 10px;
}
.storeLiStyle {
  padding-left: 8px;
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-top: 20px;
  margin-bottom: 20px;
  align-items: center;
  align-self: center;
}
.storeLeft {
  font-size: 22px;
  color: #999999;
}

.storeRight {
  font: bold;
  margin-left: 40px;
  /* font-weight: bold; */
  font-size: 22px;
  color: #999999;
}

.left {
  width: 100%;
  text-align: left;
}
.btn {
  height: 36px;
  line-height: 36px;
  min-width: 100px;
  border-radius: 50px;
}
.leftLi {
  display: flex;
  line-height: 37px;
}
.scanCountLi {
  display: flex;
  flex-direction: row;
  line-height: 37px;
  align-items: flex-start;
  justify-items: flex-start;
  justify-content: flex-start;
}
.scanCountMoreStyle {
  margin-left: 20px;
  margin-top: 6px;
}
.title {
  min-width: 22%;
  color: #999999;
}
.desc {
  margin-left: 20px;
  width: 100%;
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #333333;
}
.van-button--primary {
  background-color: rgba(71, 124, 236, 1);
}
.nar-bar-parent-style {
  display: flex;
  justify-content: space-between;
}
.nav-bar-title-style {
  margin-right: 62px;
  font-size: 22px;
  text-align: center;
  font-family: PingFangSC-Regular;
  color: #fff;
}

.nav-bar-title-right-style {
  font-size: 20px;
  margin-top: 5px;
  font-family: PingFangSC-Regular;
  text-align: center;
  margin-bottom: 11px;
  color: rgba(71, 124, 236, 1);
}
.nav-bar-style {
  /* width: 64px;
  height: 42px; */
  font-size: 30px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(71, 124, 236, 1);
  background: #2e71ff;
}
.toInStorageCountStyle {
  font-size: 22px;
  text-decoration: blink underline;
  margin-left: 20px;
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.out-detail-style {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.over-flow-style {
  width: 100%;
  height: 1200px;
  background: gray;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  opacity: 0.6;
}
.confirmStyle {
  font-size: 20px;
  align-self: center;
  padding: 10px;
}
.pickerToobarStyle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
  color: #477cec;
}
.pickerToolbarContent {
  display: flex;
  align-items: center;
}
.pickerToolbarContentButton {
  padding-left: 10px;
  padding-right: 10px;
  align-items: center;
}
.divBtnToInStorageStyle {
  width: 100%;
  height: 100%;
  display: flex;
  margin-bottom: 20px;
  justify-content: center;
  position: fixed;
  bottom: 10px;
  width: 100%;
  height: auto;
  margin: auto;
}
.btnToInStorageStyle {
  margin-top: 30px;
  margin-bottom: 22px;
  width: 92%;
  height: 56px;
  background: #2e71ff;
  border-radius: 50px;
  font-size: 22px;
  font-family: PingFangSC;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  line-height: 45px;
  letter-spacing: 1px;
  align-self: flex-end;
}
.nav-bar-style {
  background: #2e71ff;
  color: #fff;
}
/* 修改 */
.slot {
  width: 100%;
  height: 15px;
  background-color: #f6f6f6;
}
.right-arrow-style {
  margin-left: 10px;
  display: flex;
  align-items: flex-end;
}
</style>
